<template>
	<div style="display: flex;width: 100%;">
		<div class="li" v-for="(item,index) in list" :key="index" :style="getWidthLiSum(list.length)">
			<div class="title" v-if="item.titleShow" :style="getTitleCss(item)">
				{{item.title}}
			</div>
			<div class="content" :style="getContentCss(item)">
				<index-child :list="item.children" :form="form" v-if="item.type == 'oneself'" style="height: 100%;width: 100%;"></index-child>
				<com-form :item="item" :form="form" style="height: 100%;width: 100%;" v-else></com-form>
			</div>
		</div>
	</div>
</template>

<script>
	import cssStyle from './js/cssStyle.js'
	export default {
		components: {
			indexChild: () => import('./indexChild.vue'),
			comForm: () => import('./comForm.vue'),
			childColumn: () => import('./childColumn.vue')
		},
		name: 'childCom',
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			form: {
				type: Object,
				default: () => {}
			}
		},
		computed: {

		},
		mixins: [cssStyle],
		methods: {
			getWidthLi(sum = 1) {
				return 100 / sum
			},
			getTitleCss({
				titleWidth = '80px',
				textAlign = 'center',
				titleCss
			}) {
				let cssStyle = ``
				cssStyle += this.getCssStyle(titleCss)
				return `min-width: ${titleWidth};max-width: ${titleWidth}; text-align: ${textAlign}; ${cssStyle}`
			},
			getContentCss({
				contentTextAlign = 'left',
				contentCss
			}) {
				let cssStyle = ``
				cssStyle += this.getCssStyle(contentCss)
				return `text-align: ${contentTextAlign}; ${cssStyle}`
			}
		}
	}
</script>

<style lang="scss" scoped>
	.li {
		border-right: 1px solid #E6E6E6;
		width: 50%;
		display: flex;

		&:last-child {
			border-right: none;
		}
	}

	.title {
		height: 100%;
		font-size: 14px;
		border-right: 1px solid #E6E6E6;
		word-wrap: break-word;

		padding: 5px 10px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.content {
		width: 100%;
		font-size: 14px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
</style>